<script setup>

const ipcHandle = () => window.electron.ipcRenderer.send('ping')

// import Navbar from './components/navbar/Navbar.vue'
import my_navbar from './components/navbar/navbar.vue'
import myheader from './components/header/header.vue'


</script>

<template>
  <el-container class="layout-container-demo" >
    <el-aside >
      <my_navbar></my_navbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <myheader></myheader>
      </el-header>

      <el-main>
        <router-view></router-view>
        <!-- <Versions></Versions> -->
      </el-main>
    </el-container>
  </el-container>
</template>



<style>
.layout-container-demo{
  height: 100%;
  /* width: 100vw; */
}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
  height: 100%;
  width:200px;
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}


</style>